<template>
  <div class="goods">
    <div class="goods-left">
      <van-sidebar v-model="activeKey">
        <van-sidebar-item
          :title="obj.name"
          v-for="obj in goodsList"
          :key="obj.name"
          @click="scrollLeft"
        />
      </van-sidebar>
    </div>

    <div class="goods-right">
      <div>
        <div v-for="(obj, index) in goodsList" :key="index" :id="index">
          <van-cell-group :title="obj.name" :key="obj.name">
            <van-card
              v-for="item in obj.foods"
              :key="item.id"
              :price="item.price"
              :desc="item.goodsDesc"
              :title="item.name"
              :thumb="item.imgUrl"
              @click-thumb="skipDetails(item)"
            >
              <template #tags>
                <span style="margin-right: 10px"
                  >月售{{ item.sellCount }}份</span
                >
                <span>好评度{{ item.rating }}%</span>
              </template>
              <template #footer>
                <van-stepper
                  v-model="item.value"
                  theme="round"
                  button-size="22"
                  disable-input
                  :show-minus="item.value > 0 ? true : false"
                  :show-input="item.value > 0 ? true : false"
                  :allow-empty="true"
                  :min="0"
                  @plus="addGoods(item.value)"
                />
              </template>
            </van-card>
          </van-cell-group>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { $_getGoodsList } from "../../api/goods";
import BS from "better-scroll";
// 商品对象限制
interface IGoods {
  name?: String;
  foods?: Array<IFoods>;
}

interface IFoods {
  category: string;
  ctime: string;
  goodsDesc: string;
  id: number;
  imgUrl: string;
  name: string;
  price: number;
  rating: number;
  ratings: Array<IRatings>;
  sellCount: number;
  value: number;
}

interface IRatings {
  avatar: string;
  rateTime: number;
  rateType: number;
  text: string;
  username: string;
}
@Component
export default class Goods extends Vue {
  activeKey: number = 0; // 标签索引
  allPrice: number = 0;
  // value: number = 0;
  rightScroll: any;
  total: number = 0;
  // 商品分类数据
  goodsList: any = [];

  async created() {
    let res = await $_getGoodsList();
    // console.log(res.data);
    let { data } = res;
    // data.goodsList.avatar =  data.goodsList.
    data.goodsList.forEach((item: any) => {
        // console.log(item);
        

      item.foods.forEach((item: any) => {
        item.value = 0;
        // item.imgUrl =  item.imgUrl.replace('127.0.0.1','192.168.53.96')
        
        // console.log(item);
        
      });
    });
    this.goodsList = data.goodsList;
    
    // console.log(this.goodsList);
  }
  mounted(): void {
    const options = {
      click: true,
      // tap:true
      probeType: 3,
    };
    let dom: any = document.querySelector(".goods-right");
    this.rightScroll = new BS(dom, options);
    this.rightScroll.on("scroll", (pos: any) => {
      let _y: number = Math.abs(pos.y);
      // console.log(_y);
      // console.log(this.arr);
      this.scrollHeight.forEach((item: any)=>{
          if(_y >= item.min && _y < item.max){
            this.activeKey = item.index
          }
      })
      // console.log(this.scrollHeight);
      
    });
  }

  addGoods(index: number): void {
    index++;
  }
  skipDetails(item: any): void {
    this.$router.push({ path: "/details", query: item });
  }
  scrollLeft(i: number): void {
    this.rightScroll.scrollToElement(document.getElementById(i + ""), 600);
  }
  get scrollHeight(): any {
    let arr: any = [];
    this.goodsList.forEach((item: any, i: number) => {
      let h:any  = document.getElementById(i+ "")?.offsetHeight 
      arr.push({min:this.total,max:this.total+h,index:i});
      // arr.push(document.getElementById(i+ "")?.offsetHeight);
      this.total +=Math.ceil(h) - 5
    });

    return arr;
  }
}
</script>

<style  scoped>
.goods {
  width: 100%;
  flex: 1;
  display: flex;
  overflow: hidden;
}
.goods-left {
  width: 80px;
  overflow: scroll;
}
.goods-right {
  flex: 1;
  overflow: scroll;
}
.goods-right::-webkit-scrollbar,
.goods-left::-webkit-scrollbar {
  display: none;
}
.van-sidebar-item {
  line-height: 16px;
}
.van-sidebar-item--select::before {
  background-color: #f0c538;
}
.van-cell-group__title {
  background: #f4f4f4;
}
.van-Card {
  background: #fff;
}
.van-button {
  width: 30px;
  height: 30px;
  color: #000 !important;
  border-radius: 50px;
  font-size: 18px;
  font-weight: bold;
}
.van-card__title {
  /* font-size: 18px; */
  font-weight: bold;
}
.van-card__desc {
  color: #000;
}
</style>